 // 首页动态咨询组件
<template>
  <div class="project-state">
    <header>动态资讯</header>
    <div class="max-box">
      <!-- 企业动态 -->
      <div class="left-box">
        <h3>
          <router-link to="/informState" class="iconfont iconicon-test3">企业动态</router-link>
        </h3>
        <ul v-if="companyData">
          <li v-for="(data,index) in companyData" :key="index">
            <router-link to="/informDetails">
              <img :src="data.img" alt />
              <div class="text">
                <h4>{{data.title}}</h4>
                <span>{{data.text}}</span>
                <p>{{data.readCount}}阅读 {{data.time}}</p>
              </div>
            </router-link>
          </li>
       
        </ul>
      </div>
      <!-- 行业新闻 -->
      <div class="right-box">
        <h3>
          <router-link to="/newtextState" class="iconfont iconicon-test3">行业新闻</router-link>
        </h3>
        <ul v-if="networkData">
         <li v-for="(data,index) in networkData" :key="index">
          <span>{{data.time}}</span>
          <i></i>
          <router-link to='/newtextDetails'>
          <h5>{{data.title}}</h5>
          <p>{{data.text}}</p>
          </router-link>
         </li>

        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProjectState",
  data() {
   return {
    //企业动态假数据
    companyData:[
     {
       img:require('@/assets/img/新闻1.png'),
       title:'2020年中国电梯行业投资机会分析',
       text:'以宣传“安全乘梯”知识为主3督管理局、惠州市鸿浩电梯有限公司，一起走进龙门星晖南湾！',
       readCount:35,
       time:'03-22 1:14'
     },
     {
       img:require('@/assets/img/新闻1.png'),
       title:'2020年中国电梯行业投资机会分析',
       text:'以宣传“安全乘梯”知识为主题，龙门县市场监督管理局、惠州市鸿浩电梯有限公司，一起走进龙门星晖南湾！',
       readCount:35,
       time:'02-21 12:14'
     }
     
    ],
    //行业新闻假数据
    networkData:[
     {
       time:'02-21  12:14',
       title:'全国新增新冠肺炎确诊病”知识为主例2adas撒大苏打倒萨的擦擦',
       text:'以宣传“安全乘梯题，龙门县市场监督管理局、惠州市鸿浩电梯有限公司，一起走进龙门星晖南湾！',
     },
     {
       time:'02-24  12:14',
       title:'全国新增新3确诊病例2adas撒大苏打倒萨的擦擦',
       text:'以宣传“安全乘梯”知识为主题，龙门县市场监督管理局、惠3公司，一起走进龙门星晖南湾！',
     },
     {
       time:'04-21  12:14',
       title:'全国新增3冠肺炎确诊病例2adas撒大苏打倒萨的擦擦',
       text:'以宣传“安全3督管理局、惠州市鸿浩电梯有限公司，一起走进龙门星晖南湾！',
     }
    ]
   }
  },
};
</script>
<style lang='scss' scoped>
.project-state {
  height: 860px;
  width: 100%;
  background-color: #ffffff;
  box-sizing: border-box;
  overflow: hidden;

  header {
    height: 70px;
    text-align: center;
    font-size: 50px;
    color: #1a1a1a;
    margin-top: 100px;
  }
  .max-box {
   ul{
    margin-top: 25px;
   }
    h3 {
      a {
        color: black;
        font-size: 30px;
        font-weight: 400;
      }
    }
    height: 580px;
    margin-top: 50px;
    > div {
      float: left;
      height: 100%;
      box-sizing: border-box;
    }
    .left-box {
      width: 57%;
      padding-left: 15.8%;
      ul {
        li {
          &:nth-child(n + 2) {
            margin-top: 80px;
          }
          height: 130px;
          img {
            float: left;
            height: 130px;
            width: 130px;
          }
          .text {
            margin-left: 4%;
            float: left;
            width: 60%;
            position: relative;
            height: 100%;
            h4 {
              font-size: 19px;
              color: #1a1a1a;
            }
            span {
              margin-top: 10px;
              font-size: 14px;
              color: #666666;
            }

            p {
              position: absolute;
              bottom: 0;
              font-size: 11px;
              color: #cccccc;
            }
          }
        }
      }
    }
    .right-box {
      width: 43%;
      ul{
       li{
        position: relative;
        span{
         position: absolute; 
         top: 6px;
         left: 55px;
         font-size: 12px;
         &::before{
          position: absolute;
          top: 23px;
          left: -29px;
          background-color: #EEEEEE;
          content: '';
          height: 1px;
          width: 97px;
         }
        }
        i{
         position: absolute;
         top: 25px;
         left: 10px;
         transform: rotate(45deg);
         height: 9px;
         width: 9px;
         background-color:#4F7BD9 ;
        }
        &:nth-child(n+2){
         margin-top:50px;
        }
        padding-right: 30%;
        padding-left: 25%;
        box-sizing: border-box;
        h5{
         color: black;
         font-size: 24px;
        }
        p{
         font-size: 14px;
         color: #666666;
        }
       }
      }
    }
  }
}
</style>